<template>
	<view class="container">
		<view class="accuunt_top">
			<view class="user_info">
				<view class="user_img">
					<image :src="avatar"></image>
				</view>
				<view class="user_txt">
					<view class="user_name">{{nickname}}</view>
					<view class="usre_p">邀请人数：{{rows.length}}人</view>
				</view>
			</view>
			<navigator hover-class="none" url="/pages/user/invitereward/invitereward">
				<view class="ljyqbtn">我的奖励<button></button></view>
			</navigator>
		</view>
		<view class="accuunt_content">
			<!--如果是二级的话给 fenxdl 加上 two-->
			<view class="fenxdl" v-for="(item,index) in rows" :key="item.id">
				<view class="fenxdt">
					<image :src="item.avatar"></image>
				</view>
				<view class="fenxdd">
					<view class="fenxtit">{{item.nickname}}</view>
					<view class="fenxtxt">加入日期：{{item.time}}</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				avatar: "",
				nickname: "",
				rows: []
			}
		},
		onLoad() {
			var $this = this
			API.post("user/getUser").then((res) => {
				if (res.code == 1) {
					$this.nickname = res.data.nickname
					$this.avatar = res.data.avatar ? res.data.avatar : '/static/images/userimg.jpg'
				}
			})
			API.post("user/myinvite").then((res) => {
				if (res.code == 1) {
					$this.rows = res.data
				}
			})

		},
		methods: {
			yaoqing() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style>
	.accuunt_top {
		width: 100%;
		background: linear-gradient(to right, #47c0fa, #3c8ffb);
		color: #fff;
		position: relative;
		padding: 60rpx 30rpx 120rpx;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 28rpx;
	}

	.user_info {
		width: 100%;
		overflow: hidden;
		display: flex;
	}

	.user_img {
		float: left;
		background: rgba(255, 255, 255, 0.2);
		padding: 6rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.user_img image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.user_txt {
		flex: 1;
		padding-top: 18rpx;
	}

	.user_name {
		font-size: 32rpx;
		font-weight: bold;
		width: 65%;
	}

	.usre_p {
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.ljyqbtn {
		background: rgba(255, 255, 255, 0.2);
		color: #fff;
		font-size: 28rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 70rpx 0 0 70rpx;
		padding: 0 30rpx 0 40rpx;
		position: absolute;
		right: 0;
		top: 70rpx;
	}

	.ljyqbtn button {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100% !important;
		height: 100%;
		padding: 0;
		margin: 0;
		opacity: 0;
	}

	.accuunt_content {
		width: 100%;
		overflow: hidden;
		padding: 20rpx 50rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		margin-top: -50rpx;
		z-index: 1;
	}

	.fenxdl {
		display: flex;
		overflow: hidden;
		border-bottom: 2rpx #f4f4f4 solid;
		padding: 26rpx 0;
		line-height: 40rpx;
	}

	.fenxdt {
		width: 90rpx;
		margin-right: 30rpx;
	}

	.fenxdt image {
		float: left;
		width: 90rpx;
		height: 90rpx;
		border-radius: 90rpx;
	}

	.fenxdd {
		flex: 1;
	}

	.fenxtit {
		font-size: 32rpx;
		font-weight: bold;
		color: 555;
	}

	.fenxtxt {
		color: #888;
		margin-top: 10rpx;
	}

	.fenxdl.two {
		margin-left: 40rpx;
	}
</style>